<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue"
import { useLoginStore } from "../store/user";
import {getArticles, getMyReports} from "../api/user"
import dayjs from 'dayjs'
import { Report } from "../interfaces/mapping";

onMounted(() => {
  getMyReportsStart();
  getArticlesStart();

})

const loginStore = useLoginStore();
let articleList=ref([]);
const data = reactive({
  MyReports: [] as Report[],
})
const { MyReports } = toRefs(data)

async function getMyReportsStart() {
  const response = await getMyReports(id.value, value2.value)
  data.MyReports = response.data.data
  console.log(response.data.data);

  data.MyReports.forEach(item => {
    item.updateTime = Math.floor(item.updateTime / 1000)
    //@ts-ignore
    item.updateTime = dayjs.unix(item.updateTime).format('YYYY-MM-DD')
  })
}

async function getArticlesStart(){
  const response = await getArticles()
  console.log(response.data)
  articleList.value=response.data.data
}





let { age, gender, name, id } = toRefs(loginStore.getUserInfo())

const value2 = ref('全部时间');
const option2 = [
  { text: '全部时间', value: '全部时间' },
  { text: '今天', value: '今天' },
  { text: '近一周', value: '近一周' },
  { text: '近一月', value: '近一月' },
  { text: '近一年', value: '近一年' },
];
</script>
<template>
  <div class="main">


    <!-- <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" background="#ecf9ff"
        style="width: 100%;margin-top: 30px;border-radius: 1ch;" /> -->


    <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="volume-o" :scrollable="false"
      style="width: 100%;margin-top: 45px;border-radius: 1ch;">
      <van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false" :show-indicators="false">
        <van-swipe-item>系统已更新至最新版本。</van-swipe-item>
        <van-swipe-item>您可以查验您的信息并可以修改。</van-swipe-item>
        <van-swipe-item>您25日的胶片信息已更新。</van-swipe-item>
      </van-swipe>
    </van-notice-bar>


    <van-nav-bar title="主页" fixed />
    <div class="title">
      <div class="title-s">
        <div class="left">
          <van-image round width="4rem" height="4rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" />
        </div>
        <div class="right">
          <p>{{ name }}</p>
          <p>{{ gender }}</p>
          <p>{{ age }}岁</p>
        </div>
      </div>
      <!-- <div class="title-x">
                <van-icon name="exchange" size="25" />
                切换就诊人
              </div> -->
    </div>
    <!-- <van-cell-group inset>
              <van-cell icon="friends-o" size="large" title="查看自己或家人的影像报告" is-link to="/checkEfPage" />
              <van-cell title="单元格" size="large" label="描述信息" is-link />
          </van-cell-group> -->
    <div class="mycheck">
      <div class="mycheck_title">
        <h3>我的报告</h3>
      </div>
      <div class="mycheck_content">
        <div class="navbar">

          <van-dropdown-menu active-color="#1989fa">
            <van-dropdown-item v-model="value2" :options="option2" @change="getMyReportsStart" />
          </van-dropdown-menu>
        </div>
        <van-empty description="当前成员未匹配到影像报告" image-size="100" v-show="MyReports.length == 0" />
        <van-cell-group>
          <template v-for="(MyReport, index) in MyReports" :key="index">
            <van-cell :value="MyReport.updateTime" is-link
              :to='{ name: "MyReport", params: { MyReport: encodeURIComponent(JSON.stringify(MyReport)) } }'>
              <template #title>
                <span class="custom-title">类型：</span>
                <van-tag type="primary">{{ MyReport.imageType }}</van-tag>
              </template>
            </van-cell>
          </template>

        </van-cell-group>
      </div>
    </div>
    <!-- <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" /> -->
    <div class="articles">
      <h3>健康知识专栏</h3>
      <van-divider />
      <div class="article"  v-for="(item,index) in articleList">
        <div class="content">
          <h2>{{item.title}}</h2>
          <p style="opacity: 0.6;margin-top: 5px">{{item.content.slice(0,20)}}.....</p>
        </div>
        <div class="img">
          <img src="../assets/images/R-C.png" style="width: 100%;height: 100%">
        </div>
      </div>
    </div>
  </div>
  <div class="bottom"></div>
</template>



<style scoped >
.notice-swipe {
  height: 40px;
  line-height: 40px;
}

.van-dropdown-menu__item {
  --van-dropdown-menu-shadow: none !important;
  color: red;
}

.main {
  width: 100%;
  height: 100%;
  /* padding: 10px; */
  overflow-y: scroll;
  position: relative;
  background-color: #eff2f5;
}

.check_item {
  width: 100%;
  height: 45px;
  display: flex;
  flex-direction: row;
  /* border-bottom: 1px solid rgb(235, 237, 245); */
  font-size: small;
  margin-bottom: 10px;
  border-bottom: 0.5px solid;
  border-top: 0.5px solid;

}

.check_item_left {
  width: 20;
  font-size: 8px;
  display: flex;
}

.check_item_left>div {
  width: 100%;
  height: 20px;
  line-height: 20px;
  display: flex;
}

.check_item_right {
  flex-grow: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.check_item_right_top {
  display: flex;
  justify-content: space-around;
}

.check_item_right_bottom {
  display: flex;
  justify-content: space-around;
}

.navbar {
  display: flex;
  justify-content: right;
  /* padding: 10px; */
  padding-right: 20px;
  background-color: #fff;
}

/* .my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
} */
.mycheck {
  width: 100%;
  height: max-content;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  background-color: #fff;
  /* border-radius: 2ch; */
  padding: 10px;
}

.mycheck_title {
  width: 100%;
  height: 23px;
  /* border-left: 5px solid #39a9ed; */
  padding-left: 15px;
}

.mycheck_content {
  width: 100%;
  height: max-content;
}

.title {
  /* margin-top: 40px; */
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: #fff;
  /* border-radius: 2ch; */
}

.title-s {
  display: flex;
}

.title-x {
  font-size: 12px;
  padding-left: 20px;

}

.title-s .left {
  width: 5rem;
}


.title-s .right {
  flex-grow: 6;
  display: flex;
  align-items: center;
}

.right p {
  margin-left: 10px;

}

.swtich {
  margin-top: 5px;
  width: 100%;
  height: 20px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
  color: #39a9ed;
  background-color: #fff;
}

.navbar-item {
  display: flex;
}

.zs {
  width: 100%;
  height: 200px;
  background-color: #39a9ed;
}

.head {
  width: 100%;
  height: 200px;
  background-color: #e2d2d2;
}

.options {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  height: min-content;
  padding: 20px;
}

.van-tabs__content {
  padding: 20px;
  height: max-content;
}

.articles {
  padding: 20px;
  width: 100%;
  height: max-content;
  background-color: #fff;
  margin-top: 10px;
  /* border-radius: 2ch; */
}

.article {
  display: flex;
  width: 100%;
  height: 100px;
  flex-direction: row;
  margin-top: 10px;
  border-bottom: 1px solid rgb(0, 0, 0, 0.1);
}

.content {
  width: 230px;
  font-size: 10px;
  padding-left: 20px;
  /*flex-grow: 2;*/

}

.article .img {
  flex-grow: 1;
  padding: 10px;
}
</style>